<template>
	<div class="videoshow">
		<div class="page-content">
			<video :src="info.video.url" controls></video>
			<div class="preview-play">
				<div class="preview-nav">
					<div class="nav-item">简介</div>
					<div class="nav-item">评论</div>
				</div>

				<div class="preview-detail">
					<div class="preview-title">
						<div class="main-title">{{info.title}}</div>

						<div class="icon-box">
							<div class="box-item">
								<img src="../assets/img/middle-1.png" class="movie-img img">
								<div>{{info.upCount}}</div>
							</div>
							<div class="box-item">
								<img src="../assets/img/middle-2.png" class="movie-img img">
								<div>{{info.commentCount}}</div>
							</div>
							<div class="box-item">
								<img src="../assets/img/middle-3.png" class="movie-img img">
								<div></div>
							</div>
							<div class="box-item">
								<img src="../assets/img/middle-4.png" class="movie-img img">
								<div></div>
							</div>
						</div>
					</div>
				</div>


			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				info: this.$route.query.data
			}
		}
	}
</script>

<style scoped lang="less">
	.videoshow {
		background-color: #f5f5f5;

		video {
			width: 100%;
			background: #000;
			border: none;
			position: absolute;
			z-index: 10;
			top: 0px;
			left: 0px;
			right: 0px;
			height: 56.25vw;
		}

	}

	.page-content {
		padding-top: 56.25vw;
		position: relative;
	}

	.preview-play {
		margin-top: 0;
		background: #fff;
	}

	.preview-nav {
		width: 100%;
		height: 38.5px;
		box-shadow: inset 0 0 0 0 #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
		display: flex;
		align-items: center;
		background: #fff;
		top: 56.25vw;

		.nav-item {
			flex: 1;
			height: 39.5px;
			line-height: 39.5px;
			font-weight: 400;
			font-size: 16px;
			color: #999;
			letter-spacing: 0;
			text-align: center;
			display: flex;
			justify-items: center;
			flex-direction: column;
		}
	}

	.preview-detail {
		.preview-title {

			font-size: 18px;
			margin: 0 15px;
			color: #333;

			.main-title {
				margin-top: 11.4px;
				font-weight: 500;
				font-size: 17px;
				color: #333;
			}

			.icon-box {
				display: flex;
				margin-top: 26px;

				.box-item {
					flex: 1;
					width: 26px;
					height: 47px;
					margin-right: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-weight: 700;
					font-size: 12px;
					color: #666;

					.movie-img {
						width: 26px;
						height: 26px;
						margin-bottom: 5px;
						background: #fff;
					}
				}
			}
		}

	}


	.img {
		border: 0;
		display: inline-block;
		background: #f5f5f5 url(../assets/img/下载.png) no-repeat 50%;
		background-size: 50%;
	}
</style>
